<template>
	<div class="barrages-drop">
		<vue-baberrage :isShow="barrageIsShow" :barrageList="barrageList" :loop="barrageLoop" :messageHeight="messageHeight" :lanesCount="lanesCount" :maxWordCount="maxWordCount" >
		</vue-baberrage>
	</div>
</template>

<script>
	//1.安装 npm install vue-baberrage 或者 yarn add vue-baberrage
	//2.mainjs中 import { vueBaberrage } from 'vue-baberrage'  Vue.use(vueBaberrage)
	// 3.<vue-baberrage :isShow="barrageIsShow" :barrageList="barrageList" :loop="barrageLoop">
	// 	</vue-baberrage>
	// 4.import { MESSAGE_TYPE } from 'vue-baberrage'
	import {
		MESSAGE_TYPE
	} from 'vue-baberrage'
	export default {
		data() {
			return {

				msg1: '哈哈哈弹幕11',

				msg: '哈哈哈弹幕qqq',

				barrageIsShow: true, //是否显示弹幕
				barrageLoop: true, //是否循环
				barrageList: [], //弹幕列表
				messageHeight: 3,//弹幕高度
				lanesCount:4,//
				maxWordCount:1,
				hoverLanePause:true,
				list:[{
						id: 1,
						avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202106%2F05%2F20210605225335_7313e.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1685173706&t=8c31dcb3ae5f0c41f755c4fae027c54a',
						msg: '哈哈哈弹幕',
						time: 30,
						barrageStyle: 'red'
					},
					{
						id: 2,
						avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F4893c456-4d98-47ca-a57a-34d28b068e01%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1685173707&t=bbb84622c31140029b8b33bdbca04166',
						msg: '哈哈哈弹幕',
						time: 8,
						barrageStyle: 'green'
					},
					{
						id: 3,
						avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F9e1ac5a9-e7b7-4592-a3b0-2eb51649ac5e%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1685173707&t=4792d96ace1397b523c0c46b11b06a40',
						msg: '哈哈哈弹幕',
						time: 10,
						barrageStyle: 'normal'
					},
					{
						id: 4,
						avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202106%2F13%2F20210613235426_7a793.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1685173706&t=b8dbd4bba0c9217bc47eab04af9f3f14',
						msg: '我是独一无二的',
						time: 5,
						barrageStyle: 'blue'
					},
					{
						id: 5,
						avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202105%2F10%2F20210510174256_4b4d0.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1685173973&t=97cf23fa5ea36ab767817225fc5b7981',
						msg: '今天的电影真不错',
						time: 20,
						barrageStyle: 'red'
					},
					{
						id: 6,
						avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202106%2F28%2F20210628001932_2d9a7.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1685173859&t=fb34f0d50708352945af864f298383ad',
						msg: '大家一起来吃爆米花',
						time: 12,
						barrageStyle: 'normal'
					},
					{
						id: 7,
						avatar: 'https://img1.baidu.com/it/u=1240466764,3606188766&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						msg: '中国人民解放军万岁',
						time: 39,
						barrageStyle: 'red'
					},
					{
						id: 8,
						avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F4d2a8885-131d-4530-835a-0ee12ae4201b%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1685174113&t=5eda358285a0863f5a7797a4718c5c5f',
						msg: '哈哈哈弹幕',
						time: 25,
						barrageStyle: 'normal'
					},
					{
						id: 9,
						avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202005%2F10%2F20200510010150_2zSAt.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1685173859&t=5fec45f9882789a92583f0c53e9484fc',
						msg: '哈哈哈弹幕',
						time: 8,
						barrageStyle: 'red'
					}
				]
			}
		},
		mounted() {
			this.addToList()
		},
		methods: {
			addToList() {
                this.list.forEach(v=>{
					this.barrageList.push({
						id: v.id,
						avatar:v.avatar,
						msg: v.msg,
						time: v.time, //滚动速度
						barrageStyle:v.barrageStyle,
						type: MESSAGE_TYPE.FROM_TO,
					});
				})
				
			}
		},
	}
</script>

<style lang="less">
	.barrages-drop {
		.blue {
			border-radius: 100px;
			background: #e6ff75;
			color: #fff;
		}
		
		.green {
			border-radius: 100px;
			background: #75ffcd;
			color: #f00;
		}
		
		.red {
			border-radius: 100px;
			background: #e68fba;
			color: #f00;
		}
		
		.yellow {
			border-radius: 100px;
			background: #dfc795;
			color: #f00;
		}	
	}
</style>